<template>
    <div>
        <div class="tuwen_box">
            <el-form label-width="120px">
                <el-form-item label="公司logo">
                     <el-input v-model="active_component.propValue.img"></el-input>
                    <Upload :type="'primary'" :text="'点击上传logo'" @confrim="(e)=>{confrim(e)}"></Upload>
                </el-form-item>
                <el-form-item label="导航icon">
                     <el-input v-model="active_component.propValue.iconImg"></el-input>
                    <Upload :type="'primary'" :text="'点击上传'" @confrim="(e)=>{confrim2(e)}"></Upload>
                </el-form-item>
                <el-form-item label="是否固定">
                     <el-switch
                            v-model="active_component.propValue.fixed"
                            >
                            </el-switch>
                </el-form-item>
                <el-form-item label="图片尺寸">
                       <div class="flex">
                            <div>宽度(px)
                                <el-input  style="width:100px"  v-model="active_component.propValue.imgwidth" placeholder="请输入宽度"></el-input>
                            </div>
                            <div style="margin-left: 10px;">高度(px)
                                <el-input style="width:100px;" v-model="active_component.propValue.imgheight" placeholder="请输入高度"></el-input>
                            </div>
                       </div>
                 </el-form-item>
                 <el-form-item label="公司字体大小">
                       <el-input v-model="active_component.propValue.companyFont" type="number"></el-input>
                </el-form-item>
                <el-form-item label="公司名称">
                    <el-input v-model="active_component.propValue.corporateName"></el-input>
                </el-form-item>
                <el-form-item label="导航链接">
                    <div v-for="(item,i) of active_component.propValue.headerList" :key="i">
                        <div class="flex">
                        <el-input v-model="item.name"></el-input>
                        <el-input v-model="item.link"></el-input>
                        <div class="close_item" @click="deleteItem(i)">
                            <i class="el-icon-circle-close"></i>
                        </div>
                        </div>
                        <div>
                            <el-switch
                                v-model="item.isChildren"
                                active-text="有子菜单"
                                inactive-text="无子菜单">
                                </el-switch>
                        </div>
                        <div v-if="item.isChildren">
                            <div class="flex" v-for="(ptiem,p) of item.Children" :key="p">
                                <el-input v-model="ptiem.name"></el-input>
                                <el-input v-model="ptiem.link"></el-input>
                                 <div class="close_item" @click="deleteSubItem(i,p)">
                                    <i class="el-icon-circle-close"></i>
                                </div>
                            </div>
                         <el-button @click="addChildrenItem(i)" size="mini" type="primary">新增子菜单</el-button>
                        </div>
                    </div>
                    <el-button @click="addItem" size="mini" type="primary">新增</el-button>
                </el-form-item>
                <el-form-item label="导航栏样式">
                    <el-radio-group v-model="active_component.propValue.radioType">
                        <el-radio :label="1">样式一</el-radio>
                        <el-radio :label="2">样式二</el-radio>
                        <el-radio :label="3">样式三</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </div>
        <div class="flex-center" style="margin-top:10px;">
            <el-button size="small" type="" @click="closeTK">取消</el-button>
            <el-button size="small" type="primary" @click="pushcanvas">确定</el-button>
        </div>
    </div>
</template>

<script>
import Upload  from "../Upload/index.vue";
export default {
    props: ["componentId", "componentList","activeCompont"],
    components: {Upload},
    data() {
        return {
            name: "",
            tabIndex: 0,
            active_component: {},
        };
    },
    beforeDestroy() {
        const editor = this.editor;
        if (editor == null) return;
        editor.destroy(); // 组件销毁时，及时销毁编辑器
    },

    created() {
        if (this.activeCompont) {
            this.active_component = this.activeCompont
        }else {
            for (let key in this.componentList) {
                if (this.componentList[key].isDialog && this.componentList[key].propValue.value == this.componentId) {
                    this.active_component = JSON.parse(JSON.stringify(this.componentList[key]))
                }
            }
        }
    },

    methods: {
        // 点击上传logo
        confrim(e){
            this.active_component.propValue.img=e
        },
        confrim2(e){
            this.active_component.propValue.iconImg=e
        },
        deleteItem(i){
            this.active_component.propValue.headerList.splice(i,1)
        },
        deleteSubItem(i,p){
            this.active_component.propValue.headerList[i].Children.splice(p,1)
        },
        addChildrenItem(i){
                      this.active_component.propValue.headerList[i].Children.push({
                        name:'子菜单名称',
                        link:'跳转链接'
                    })
        },
        addItem(){
            this.active_component.propValue.headerList.push({
                name:'',
                link:''
            })
            console.log(111)
        },

        closeTK(){
            this.$emit("closeTK")
        },

        pushcanvas() {
            if(this.activeCompont){
                this.$emit("closeTK")//关闭弹框
            }else{
                let canvasStyle = this.$store.state.canvasStyleData;
                let component = this.active_component;
                component.style.top = 0;
                component.style.left = 0;

                this.$store.commit("addComponent", { component: component });
                canvasStyle.height = String(
                    Number(canvasStyle.height) + Number(component.style.height)
                );
                this.$store.commit("setCanvasStyle", canvasStyle);
                this.$emit("closeTK")//关闭弹框
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.tuwen_box {
  width: 400px;
  img {
    width: 100%;
  }

}

.close_item{
    margin-left: 5px;
    cursor: pointer;
}
</style>

